<!DOCTYPE html>
<html>
	<head>
		<title>JS Template</title>
		<script type="text/javascript" src="../js-lib/jquery/core/jquery-1.6.2.js"></script>
		<script type="text/javascript" src="plugin/js-template-plugin.js"></script>
		
		<link rel="stylesheet" type="text/css" href="style/style.css" />
	</head>
	<body>
		<table class="input-form">
			<tr class="input-row">
				<td class="input-label text inputBorder">Template:</td>
				<td class="input-field text inputBorder">
					<textarea id="template" class="textArea50" name="template"><div id="{@:email}" class="row"><div>{@:name}</div><div>{@:email}</div></div></textarea>
				</td>
			</tr>
			<tr class="input-row">
				<td class="input-label text inputBorder">Data:</td>
				<td class="input-field text inputBorder">
					<textarea id="template-data" class="textArea100" name="template-data">[
	{"name":"Sachin Tendulkar", "email":"sachin.tendulkar@cricket.com"},
	{"name":"Rahul Dravid","email":"rahul.dravid@cricket.com"},
	{"name":"M.S.Dhoni","email":"m.s.dhoni@cricket.com"},
	{"name":"Suresh Raina","email":"suresh.raina@cricket.com"},
	{"name":"Kapil Dev", "email":"kapil.dev@cricket.com"},
	{"name":"Saurav Ganguly","email":"saurav.ganguly@cricket.com"},
	{"name":"Chris Gayle","email":"chris.gayle@cricket.com"},
	{"name":"Rohit Sharma", "email":"rohit.sharma@cricket.com"},
	{"name":"Gautam Gambhir","email":"gautam.gambhir@cricket.com"},
	{"name":"Virender Sehwag","email":"virender.sehwag@cricket.com"},
	{"name":"Zaheer Khan", "email":"zaheer.khan@cricket.com"},
	{"name":"Ravinder Jadeja","email":"ravinder.jadeja@cricket.com"},
	{"name":"Bret Lee","email":"bret.lee@cricket.com"},
	{"name":"Brian Lara", "email":"brian.lara@cricket.com"},
	{"name":"Robin Uthappa","email":"robin.uthappa@cricket.com"},
	{"name":"Umesh Yadav","email":"umesh.yadav@cricket.com"}
]</textarea>
				</td>
			</tr>
			<tr class="input-row">
				<td colspan="2" class="buttonContainer">
					<input type="button" id="generate" name="Generate" value="Generate" />
				</td>
			</tr>
		</table>
		
		<div id="output" style="border: 1px solid #808080;">
		</div>
	</body>
	
	<script type="text/javascript">
		$( document ).ready(function() {
			$( '#generate' ).click(function() {
				var template = $( '#template' ).val(),
					data = $.parseJSON( $( '#template-data' ).val() ),
					result = null,
					html = '';
				
				result = $.fn.jsTemplate( template, data );
				
				$( result ).each(function(index) {
					html += result[index];
				})
				
				$( '#output' ).html( html ).show();
			});
		});
	</script>
</html>